import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import { Form, Button, Input, Tabs, Picker } from 'antd-mobile'
import Store from './store'
import LogoImg from '@/assets/login/logoHeader.png'
import UserImg from '@/assets/login/user.png'
import PwdImg from '@/assets/login/pwd.png'
import WebsiteImg from '@/assets/login/website.png'
import type { TabValue } from './interface'

const Login = observer(() => {
    const store = useLocalObservable(() => new Store())

    return (
        <div className={styles.login}>
            <div className={styles.login_header} />
            <div className={styles.login_content}>
                <img src={LogoImg} />
                <Tabs
                    defaultActiveKey={store.tab}
                    onChange={val => store.onChangeTabs(val as TabValue)}
                >
                    <Tabs.Tab title="机构" key="company" />
                    <Tabs.Tab title="讲师" key="teacher" />
                    <Tabs.Tab title="监管" key="organ" />
                </Tabs>
                <div className={styles.formView}>
                    <Form
                        style={{ '--border-top': 'none' }}
                        onFinish={store.login}
                        requiredMarkStyle="text-optional"
                        footer={
                            <Button
                                block
                                type="submit"
                                color="primary"
                                className={styles.submitBtn}
                            >
                                立即登录
                            </Button>
                        }
                    >
                        <Form.Item>
                            <div className={styles.website}>
                                <img src={WebsiteImg} />
                                <span onClick={() => (store.websitePickerVisible = true)}>
                                    {store.websiteName}
                                </span>
                                <Picker
                                    columns={store.websiteList}
                                    visible={store.websitePickerVisible}
                                    value={store.websiteDefault}
                                    onConfirm={store.onConfirmWebsitePicker}
                                    onCancel={() => (store.websitePickerVisible = false)}
                                />
                            </div>
                        </Form.Item>

                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: '请输入账号' }]}
                        >
                            <div className={styles.inputItem}>
                                <img src={UserImg} />
                                <Input
                                    style={{ '--font-size': '14px' }}
                                    maxLength={20}
                                    placeholder="请输入账号"
                                />
                            </div>
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[{ required: true, message: '请输入密码' }]}
                        >
                            <div className={styles.inputItem}>
                                <img src={PwdImg} />
                                <Input
                                    style={{ '--font-size': '14px' }}
                                    className={styles.input}
                                    placeholder="请输入登录密码"
                                    maxLength={20}
                                    type={'password'}
                                />
                            </div>
                        </Form.Item>
                    </Form>
                </div>

                <div className={styles.footer}>
                    <span>© 2024 杭州沃土教育科技股份有限公司 技术支持</span>
                    <span>联系我们： 0571-88885888</span>
                </div>
            </div>
        </div>
    )
})

export default Login
